<template>
  <a-layout class="basic-layout">
    <!-- 顶部导航栏 -->
    <GlobalHeader :menu-items="menuItems" :selected-key="selectedKey" />

    <!-- 内容区域 -->
    <a-layout-content class="content-area">
      <div class="main-content">
        <router-view v-slot="{ Component }">
          <transition name="fade" mode="out-in">
            <component :is="Component" />
          </transition>
        </router-view>
      </div>
    </a-layout-content>

    <!-- 底部版权信息 -->
    <GlobalFooter />
  </a-layout>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import GlobalHeader from '@/components/GlobalHeader.vue'
import GlobalFooter from '@/components/GlobalFooter.vue'
import type { MenuProps } from 'ant-design-vue'

// 导航菜单配置
const menuItems: MenuProps['items'] = [
  { key: 'home', label: '首页' },
  { key: 'features', label: '功能介绍' },
  { key: 'examples', label: '使用示例' },
  { key: 'about', label: '关于我们' }
]

const route = useRoute()
const selectedKey = ref('home')

// 根据当前路由设置选中的菜单项
onMounted(() => {
  updateSelectedKey()
})

// 监听路由变化，更新选中的菜单项
const updateSelectedKey = () => {
  const path = route.path.slice(1) || 'home'
  // 检查路径是否在菜单项中存在
  const menuItem = menuItems.find(item => item.key === path)
  selectedKey.value = menuItem ? path : 'home'
}

// 暴露给父组件的方法
defineExpose({
  updateSelectedKey
})
</script>

<style scoped>
.basic-layout {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.content-area {
  flex: 1;
  margin: 24px auto;
  padding: 0 24px;
  max-width: 1200px;
  width: 100%;
  /* 为底部固定栏留出空间 */
  padding-bottom: 100px;
}

.main-content {
  background-color: #ffffff;
  padding: 24px;
  border-radius: 8px;
  min-height: 280px;
}

/* 页面切换动画 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .content-area {
    margin: 16px auto;
    padding: 0 16px;
    padding-bottom: 80px;
  }

  .main-content {
    padding: 16px;
  }
}

@media (max-width: 480px) {
  .content-area {
    margin: 8px auto;
    padding: 0 8px;
  }

  .main-content {
    padding: 12px;
  }
}
</style>
